<template>
	<scroll-view
		:style="{
			height: `${windowHeight}px`,
			borderBottom: scrollPageProps.borderStyle,
			boxSizing: 'border-box',
			backgroundColor: scrollPageProps.backgroundColor,
		}"
		scroll-y="true"
		:refresherEnabled="scrollPageProps.refresherEnabled"
		:refresherTriggered="scrollPageProps.refresherTriggered"
		@scrolltolower="$emit('scrolltolower', $event)"
		@refresherrefresh="$emit('refresherrefresh', $event)"
	>
		<view class="scroll-page-content">
			<slot></slot>
		</view>
	</scroll-view>
</template>

<script setup>
	const { windowHeight } = uni.getSystemInfoSync()
	const scrollPageProps = defineProps({
		borderStyle: {
			type: [String, Boolean],
			default: false,
		},
		refresherEnabled: {
			type: Boolean,
			default: true,
		},
		refresherTriggered: {
			type: Boolean,
			default: false,
		},
		backgroundColor: {
			type: String,
			default: '#fff',
		},
	})
	defineEmits(['scrolltolower', 'refresherrefresh'])
</script>

<style lang="scss">
	.scroll-page-content {
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
